<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>怪兽大乱斗 - 怪兽卡模版</title>
    <style>
      /* AI: style中的代码请勿调整，直接沿用。 */
      @page {
        size: A4;
        margin: 0;
      }

      body {
        font-family: 'Microsoft YaHei', sans-serif;
        background: #f0f0f0;
      }

      .a4 {
        padding: 0;
        margin: 0 auto;
        width: 210mm;
        /* height: 297mm; */
        box-sizing: border-box;
        background: white;
      }

      .card-group {
        /* 自动分页打印 另起一页 */
        page-break-before: always;
        break-before: page;

        display: flex;
        flex-wrap: wrap;
        gap: 0.5mm;
        justify-content: center;
        padding: 2mm; /* Add some padding to prevent clipping on edges */
        margin: 0;

        border-bottom: 1px solid #b3b3b5;
      }

      .card {
        width: 6cm;
        height: 9cm;
        background: white;
        border-radius: 10px;
        /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
        overflow: hidden;
        display: flex;
        flex-direction: column;
        text-align: center;
        position: relative;
        border: 3px solid #7064a5;
      }

      .card-status {
        display: flex;
        justify-content: center;
        gap: 10px;
        /* margin: 6px 0; */
        padding: 5px 0;
        font-size: 20px;
        font-weight: bold;
        color: #555;
        height: 0.5cm;
        line-height: 0.5cm;

        border-top: 2px solid #b1afaf;
      }

      .card-status span {
        display: flex;
        align-items: center;
        gap: 2px;
      }

      .rotate {
        /* 将文本倒置 */
        transform: rotate(-180deg);
        transform-origin: 50% 50%; /* 设置变换中心点在元素中心 */
      }

      .card-boss {
        height: 8cm;
        max-height: 8cm;
      }

      .card-role-emoji {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #555;
        margin: 2px auto;

        font-size: 150px;
        width: 200px;
        height: 200px;
        border-radius: 100px;
        border: 5px solid #56432b;
        background-color: #e2eaf7;
      }
      .card-role-img {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 80px;
        color: #555;
        /* width: 120px;
        height: 120px; */
        /* border-radius: 100px; */
        margin: 8px auto;
      }
      .card-role-img img {
        width: 200px;
        height: 200px;
        border-radius: 100px;
        border: 5px solid #56432b;
      }
      /* .card-role_quan {
        width: 150px;
        height: 150px;
        border-radius: 100px;
      } */

      .card-name {
        position: absolute;
        font-size: 20px;
        font-weight: bold;
        /* margin: 2px 4px;
        padding: 4px; */

        left: 55px;
        bottom: 80px;
        /* background: #f4ca25;
        border: 1px solid #ffe681;
        border-radius: 10px; */

        /* margin: 5px auto; */

        /* left: 50%; */
        background: #f9efda;
        border: 2px solid #f4ca25;
        padding: 2px 8px;
        border-radius: 10px;

        /* max-width: 80%; */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        width: 100px;
        height: 30px;
        text-align: center;
        /* display: flex; */
        /* align-items: center; */
        font-weight: bold;
        /* font-size: 13px; */
        color: #333;
      }

      .card-info {
          position: relative;
          bottom: 20px;
          font-size: 16px;
          margin: 5px 8px;
          font-weight: bold;
          flex-grow: 1;
          display: flex;
          color: #020202;
          text-align: left;
          height: 20px;
          justify-content: center;
          /* line-height: 200px; */
          
      }

      .card-msg {
        margin: 5px auto;
        bottom: 8px;
        left: 50%;
        background: #fff59a36;
        border: 2px solid #f4ca25;
        padding: 2px 8px;
        border-radius: 12px;

        max-width: 80%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        width: 90%;
        height: 30px;
        text-align: left;
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 13px;
        color: #d44;
      }

      @media print {
        body {
          /* padding: 0.5cm; */
          background: white;
        }

        .card-group {
          border-bottom: none;
        }
      }
    </style>
  </head>
  <body>
    <div class="a4">
      <!-- 怪物卡模版:每个card-group放9个card -->
      <div class="card-group">
        <div class="card">
          <div class="card-status rotate">
            <span title="消耗">🔷 9</span>
            <span title="攻击">⚡ 4</span>
            <span title="血量">🩸 10</span>
          </div>
          <div class="card-boss">
            <div
              class="card-role-img"
              title="按规则匹配图片 ./ui/boss/卡牌编码.png"
            >
              <img src="./ui/boss/K27.png" />
            </div>
            <div
              class="card-name"
              title="名称"
            >
              地狱犬
            </div>
            <!-- <div class="card-msg" title="气泡语录">毒液注入！</div> -->
          </div>

          <div
            class="card-info"
            title="描述"
          >
          召唤1只已死亡的怪物
          </div>

          <div class="card-status card-status_down">
            <span title="消耗">🔷 9</span>
            <span title="攻击">⚡ 4</span>
            <span title="血量">🩸 10</span>
          </div>
        </div>
        <div class="card">
          <div class="card-status rotate">
            <span title="消耗">🔷 8</span>
            <span title="攻击">⚡ 4</span>
            <span title="血量">🩸 9</span>
          </div>
          <div class="card-boss">
            <div
              class="card-role-img"
              title="按规则匹配图片 ./ui/boss/卡牌编码.png"
            >
              <img src="./ui/boss/K26.png" />
            </div>
            <div
              class="card-name"
              title="名称"
            >
              巨岩象
            </div>
            <!-- <div class="card-msg" title="气泡语录">毒液注入！</div> -->
          </div>
          <div
            class="card-info"
            title="描述"
          >
          敌方1只怪物返回手牌
          </div>

          <div class="card-status card-status_down">
            <span title="消耗">🔷 8</span>
            <span title="攻击">⚡ 4</span>
            <span title="血量">🩸 9</span>
          </div>
        </div>
        <div class="card">
          <div class="card-status rotate">
            <span title="消耗">🔷 8</span>
            <span title="攻击">⚡ 4</span>
            <span title="血量">🩸 10</span>
          </div>
          <div class="card-boss">
            <div
              class="card-role-img"
              title="按规则匹配图片 ./ui/boss/卡牌编码.png"
            >
              <img src="./ui/boss/K25.png" />
            </div>
            <div
              class="card-name"
              title="名称"
            >
              邪火凤凰
            </div>
          </div>

          <div
          class="card-info"
          title="描述"
        >
          被攻击时，灼伤对手造成2点伤害
        </div>
          <div class="card-status card-status_down">
            <span title="消耗">🔷 8</span>
            <span title="攻击">⚡ 4</span>
            <span title="血量">🩸 10</span>
          </div>
        </div>
        <div class="card">
          <div class="card-status rotate">
            <span title="消耗">🔷 9</span>
            <span title="攻击">⚡ 4</span>
            <span title="血量">🩸 10</span>
          </div>
          <div class="card-boss">
            <div
              class="card-role-img"
              title="按规则匹配图片 ./ui/boss/卡牌编码.png"
            >
              <img src="./ui/boss/K27.png" />
            </div>
            <div
              class="card-name"
              title="名称"
            >
              地狱犬
            </div>
            <!-- <div class="card-msg" title="气泡语录">毒液注入！</div> -->
          </div>

          <div
            class="card-info"
            title="描述"
          >
          召唤1只已死亡的怪物
          </div>

          <div class="card-status card-status_down">
            <span title="消耗">🔷 9</span>
            <span title="攻击">⚡ 4</span>
            <span title="血量">🩸 10</span>
          </div>
        </div>
        <div class="card">
          <div class="card-status rotate">
            <span title="消耗">🔷 8</span>
            <span title="攻击">⚡ 4</span>
            <span title="血量">🩸 9</span>
          </div>
          <div class="card-boss">
            <div
              class="card-role-img"
              title="按规则匹配图片 ./ui/boss/卡牌编码.png"
            >
              <img src="./ui/boss/K26.png" />
            </div>
            <div
              class="card-name"
              title="名称"
            >
              巨岩象
            </div>
            <!-- <div class="card-msg" title="气泡语录">毒液注入！</div> -->
          </div>
          <div
            class="card-info"
            title="描述"
          >
          敌方1只怪物返回手牌
          </div>

          <div class="card-status card-status_down">
            <span title="消耗">🔷 8</span>
            <span title="攻击">⚡ 4</span>
            <span title="血量">🩸 9</span>
          </div>
        </div>
        <div class="card">
          <div class="card-status rotate">
            <span title="消耗">🔷 8</span>
            <span title="攻击">⚡ 4</span>
            <span title="血量">🩸 10</span>
          </div>
          <div class="card-boss">
            <div
              class="card-role-img"
              title="按规则匹配图片 ./ui/boss/卡牌编码.png"
            >
              <img src="./ui/boss/K25.png" />
            </div>
            <div
              class="card-name"
              title="名称"
            >
              邪火凤凰
            </div>
          </div>

          <div
          class="card-info"
          title="描述"
        >
          被攻击时，灼伤对手造成2点伤害
        </div>
          <div class="card-status card-status_down">
            <span title="消耗">🔷 8</span>
            <span title="攻击">⚡ 4</span>
            <span title="血量">🩸 10</span>
          </div>
        </div>
        <div class="card">
          <div class="card-status rotate">
            <span title="消耗">🔷 9</span>
            <span title="攻击">⚡ 4</span>
            <span title="血量">🩸 10</span>
          </div>
          <div class="card-boss">
            <div
              class="card-role-img"
              title="按规则匹配图片 ./ui/boss/卡牌编码.png"
            >
              <img src="./ui/boss/K27.png" />
            </div>
            <div
              class="card-name"
              title="名称"
            >
              地狱犬
            </div>
            <!-- <div class="card-msg" title="气泡语录">毒液注入！</div> -->
          </div>

          <div
            class="card-info"
            title="描述"
          >
          召唤1只已死亡的怪物
          </div>

          <div class="card-status card-status_down">
            <span title="消耗">🔷 9</span>
            <span title="攻击">⚡ 4</span>
            <span title="血量">🩸 10</span>
          </div>
        </div>
        <div class="card">
          <div class="card-status rotate">
            <span title="消耗">🔷 8</span>
            <span title="攻击">⚡ 4</span>
            <span title="血量">🩸 9</span>
          </div>
          <div class="card-boss">
            <div
              class="card-role-img"
              title="按规则匹配图片 ./ui/boss/卡牌编码.png"
            >
              <img src="./ui/boss/K26.png" />
            </div>
            <div
              class="card-name"
              title="名称"
            >
              巨岩象
            </div>
            <!-- <div class="card-msg" title="气泡语录">毒液注入！</div> -->
          </div>
          <div
            class="card-info"
            title="描述"
          >
          敌方1只怪物返回手牌
          </div>

          <div class="card-status card-status_down">
            <span title="消耗">🔷 8</span>
            <span title="攻击">⚡ 4</span>
            <span title="血量">🩸 9</span>
          </div>
        </div>
        <div class="card">
          <div class="card-status rotate">
            <span title="消耗">🔷 8</span>
            <span title="攻击">⚡ 4</span>
            <span title="血量">🩸 10</span>
          </div>
          <div class="card-boss">
            <div
              class="card-role-img"
              title="按规则匹配图片 ./ui/boss/卡牌编码.png"
            >
              <img src="./ui/boss/K25.png" />
            </div>
            <div
              class="card-name"
              title="名称"
            >
              邪火凤凰
            </div>
          </div>

          <div
          class="card-info"
          title="描述"
        >
          被攻击时，灼伤对手造成2点伤害
        </div>
          <div class="card-status card-status_down">
            <span title="消耗">🔷 8</span>
            <span title="攻击">⚡ 4</span>
            <span title="血量">🩸 10</span>
          </div>
        </div>

      </div>
      
      <!-- emoji 表情版本, 如果有表情就用这个 -->
      <div class="card" style="display: none;">
        <div class="card-status rotate">
          <span title="消耗">🔷 3</span>
          <span title="攻击">⚡ 2</span>
          <span title="血量">🩸 2</span>
        </div>
        <div class="card-boss">
          <div
            class="card-role-emoji"
            title="图标，待AI自动匹配与名称合适的emoji图标"
          >
            🦩
          </div>
          <div
            class="card-name"
            title="名称"
          >
            烈火鸟
          </div>
          <!-- <div class="card-msg" title="气泡语录">毒液注入！</div> -->
        </div>

        <div
          class="card-info"
          title="描述"
        >
          被攻击时，灼伤对手造成2点伤害
        </div>
        <div class="card-status">
          <span title="消耗">🔷 3</span>
          <span title="攻击">⚡ 2</span>
          <span title="血量">🩸 2</span>
        </div>
      </div>

      <!-- 技能卡模版:每个card-group放9个card -->
      <div class="card-group" style="display: none;">
        <div class="card">
          <div class="card-status rotate">
            <span title="消耗">🔷 3</span>
            <span title="攻击">⚡ 2</span>
            <span title="血量">🩸 2</span>
          </div>
          <div class="card-boss">
            <div
              class="card-role-emoji"
              title="图标，待AI自动匹配与名称合适的emoji图标"
            >
            🛡️
            </div>
            <div
              class="card-name"
              title="名称"
            >
            钢铁护盾
            </div>
            <!-- <div class="card-msg" title="气泡语录">毒液注入！</div> -->
          </div>

          <div
            class="card-info"
            title="描述"
          >
            被攻击时，灼伤对手造成2点伤害
          </div>
          <div class="card-status">
            <span title="消耗">🔷 3</span>
            <span title="攻击">⚡ 2</span>
            <span title="血量">🩸 2</span>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
